<!-- Created by 梁棋 on 2024/1/31 -->
<template>
  <div>
    <el-input v-bind="$attrs" v-model="selectVal" placeholder="请选择" readonly class="my_el_input">
      <el-button slot="append" icon="el-icon-search" @click="selectDialogOpen()"></el-button>
      <span v-if="selectVal && !$attrs.disabled" slot="append" class="icon" @click="handleClear()">
        <i class="el-icon-circle-close"></i>
      </span>
    </el-input>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="selectDialogClose"
      title="选择"
      width="600px">
      <el-table
        ref="table"
        :data="tableData"
        class="no-multiple"
        border
        @select="select"
        @row-click="tableClick">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="地址" prop="address"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectDialogClose">取 消</el-button>
        <el-button :disabled="selection.length === 0" type="primary" @click="selectDialogConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'SelectDialog',
  props: {
    // 当前值
    value: {
      type: [Number, String, Array],
      default: '',
      required: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      tableData: [
        { id: '1', name: '王小虎', address: '广州市' },
        { id: '2', name: '王中虎', address: '深圳市' },
        { id: '3', name: '王大虎', address: '珠海市' },
        { id: '4', name: '王老虎', address: '中山市' },
      ],
      currentRadioValue: '',
      selection: []
    };
  },
  computed: {
    selectVal: {
      set(val) {
        // 通过.sync修饰符传值可以使用
        // this.$emit('update:value', val)
        // 通过v-model传值需要触发默认的input事件
        this.$emit('input', val);
      },
      get() {
        return this.value;
      }
    },
  },
  methods: {
    select(selection, row) {
      const { table } = this.$refs;
      const len = selection.length;
      if (len > 1) {
        table.clearSelection();
        table.toggleRowSelection(row);
      }
      this.selection = len ? [row] : [];
    },
    tableClick(row, column, event) {
      const isSelected = this.selection.some(item => item.id === row.id);
      const { table } = this.$refs;
      table.clearSelection();
      if (isSelected) {
        this.selection = [];
      } else {
        table.toggleRowSelection(row);
        this.selection = [row];
      }
    },
    handleClear() {
      this.selectVal = '';
    },
    selectDialogOpen() {
      if (!this.$attrs.disabled) {
        this.dialogVisible = true;
        this.$nextTick(() => {
          const { table } = this.$refs;
          table.clearSelection();
        });
      }
    },
    selectDialogClose() {
      this.dialogVisible = false;
    },
    selectDialogConfirm() {
      const [row] = this.selection;
      this.selectVal = row.name;
      this.selectDialogClose();
      this.$emit('callback', this.selection);
    },
  }
};
</script>

<style scoped lang="scss">
.my_el_input {
  position: relative;
  .icon {
    height: 100%;
    position: absolute;
    top: 0;
    right: 57px;
    color: transparent;
    transition: all .3s;
    line-height: 30px;
    cursor: pointer;
  }
}
.my_el_input:hover {
  .icon {
    color: #C0C4CC;
    transform: translateX(-10px);
  }
  .icon:hover {
    .el-icon-circle-close {
      color: #909399;
      transition: color .2s cubic-bezier(.645, .045, .355, 1);
    }
  }
}
.no-multiple {
  // 隐藏多选
  ::v-deep .el-table__header-wrapper .el-checkbox {
    display: none;
  }
}
::v-deep .el-input .el-input__inner {
  cursor: default;
}
</style>
